<template>
    <el-main class="AlarmDetails" style="padding: 0">
        <p>告警设备详情</p>
        <div class="title">
            <div>设备名称{{detailsForm.deviceName?detailsForm.deviceName:''}}</div>
            <button @click="goBack">
                <i class="iconfont icon-return"></i>
<!--                <router-link to="window.history.go(-1)">返回</router-link>-->
               返回
            </button>
        </div>
        <div class="title2" style="font-size: 14px">
            <div>设备编号：{{detailsForm.deviceNo}}</div>
            <div class="title2-right">{{detailsForm.reset==0?'是':'否'}}</div>
        </div>

        <div class="contain" style="overflow-x: hidden;">
        <!-- top卡片区 -->
              <div class="top-card-box">
                  <el-row :gutter="10">
                      <el-col :span="16">
                          <el-card>
                              <div slot="header" class="clearfix">
                                  <span>设备信息</span>
                              </div>
                              <el-row>
                                  <el-col :span="12">
                                      设备编号：{{detailsForm.id}}
                                  </el-col>
                                  <el-col :span="12">
                                      设备名称：{{detailsForm.deviceName?detailsForm.deviceName:''}}
                                  </el-col>
                              </el-row>
                              <el-row>
                                  <el-col :span="12">
                                      设备型号：-
                                  </el-col>
                                  <el-col :span="12">
                                      上报时间：{{new Date(detailsForm.alarmTime).toLocaleString()}}
                                  </el-col>
                              </el-row>
                              <el-row>
                                  <el-col :span="12">
                                      设备类型：{{detailsForm.alarmDetails}}
                                  </el-col>
                                  <el-col :span="12">
                                      所属组织：{{detailsForm.department}}
                                  </el-col>
                              </el-row>
                              <el-row>
                                  <el-col :span="12">
                                      责任人：-
                                  </el-col>
                                  <el-col :span="12">
                                      电话：-
                                  </el-col>
                              </el-row>
                              <el-row>
                                  <el-col :span="12">
                                      安装点位：{{detailsForm.department}}
                                  </el-col>
                                  <el-col :span="12">

                                  </el-col>
                              </el-row>
                              <el-row>
                                  <el-col :span="12">
                                     详细地址：{{detailsForm.installAddr}}
                                  </el-col>
                                  <el-col :span="12">

                                  </el-col>
                              </el-row>
                              <el-row>
                                  <el-col :span="12">
                                      设备描述：-
                                  </el-col>
                                  <el-col :span="12">

                                  </el-col>
                              </el-row>
                          </el-card>
                      </el-col>
                      <el-col :span="8">
                          <el-card class="box-card">
                              <div slot="header" class="clearfix">
                                  <span>视频联动</span>
                              </div>
                          </el-card>
                      </el-col>
                  </el-row>
              </div>
        <!-- 参数区 -->
            <div class="nav-title">
                <h5>设备实时参数</h5>
                <i class="el-icon-s-grid"></i>
            </div>
            <div class="bottom-card">
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                    <el-col :span="4" >
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>设备状态</span>
                            </div>
                            <div class="text item" style="font-size: 22px">
                                在线
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="4">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>漏电流</span>
                            </div>
                            <div class="text item item-common">
                                漏电流：<span class="item1-c">120mA</span>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="5">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>线路温度</span>
                            </div>
                            <div class="text item item-common1">
                               <div class="item-p">
                                   <span>A相线缆温度：</span>
                                   <span class="item1-c2">23.6°C</span>
                               </div>
                                <div class="item-p">
                                    <span>A相线缆温度：</span>
                                    <span class="item1-c2">23.6°C</span>
                                </div>
                                <div class="item-p">
                                    <span>A相线缆温度：</span>
                                    <span class="item1-c2">23.6°C</span>
                                </div>
                                <div class="item-p">
                                    <span>A相线缆温度：</span>
                                    <span class="item1-c2">23.6°C</span>
                                </div>

                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="5">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>线路电流</span>
                            </div>
                            <div class="text item item-common">
                                <div>A相线缆电流：<span class="item1-c2">0.58A</span></div>
                                <div>B相线缆电流：<span class="item-c3">0.88A</span></div>
                                <div>C相线缆电流：<span class="item1-c" >1.28A</span></div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="5">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>相电压</span>
                            </div>
                            <div class="text item item-common">
                                <div>A相电压：<span class="item1-c2">225.2V</span></div>
                                <div>B相电压：<span class="item1-c2">230.5V</span></div>
                                <div>C相电压：<span class="item1-c2">218.8V</span></div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>


            <div class="last-bottom-box">
                <el-card class="box-card" style="margin-top: 20px">
                    <div slot="header" class="clearfix">
                        <span>设备点位</span>
                    </div>
                    <div class="text item bottom-card-contain">
                        <el-row>
                            <el-col :span="16">
                                <div>平面图</div>
                                <img style="margin: 10px 0" src="../../assets/images/alarm/alarmPosition1.jpg" alt="">
                            </el-col>
                            <el-col :span="8">
                                <div>定位</div>
                                <img style="margin: 10px 0"  src="../../assets/images/alarm/position2.jpg" alt="">
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </div>
        </div>

    </el-main>
</template>

<script>
import axios  from "axios";
export default {
    name: "AlarmDetails",
    data:function (){
        return {
            detailsForm:{},
        }
    },
    mounted() {
        this.init();
    },
    methods:{
        init:function (){
            let temp = new URLSearchParams(location.search);
            let id = temp.get('id');
            this.$axios({
                url:`/warnings/${id}`,
                params:{
                },
            }).then(({data})=>{
                console.log(data)
                this.detailsForm=data.data.result
                console.log('1',this.detailsForm)
            })
        },
        goBack(){
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}
a {
    color: #3a4049;
    text-decoration: none;
}
.AlarmDetails {
    text-align: left;
    p {
        font-size: 14px;
        margin-bottom: 20px;
    }
    .title {
        display: flex;
        font-size: 15px;
        div {
            font-weight: 600;
            font-size: 17px;
        }
        button {
            border:1px solid #f2f6fc;
            background-color: #FFFFFF;
            margin-left: 100px;
            padding: 6px 10px;
            border-radius: 4px;
            i {
                color: #0a92fa;
                font-weight: bold;
                margin-right: 8px;
            }
        }
    }
    .title2 {
        display: flex;
        margin: 10px 0 20px;
        .title2-right {
            margin-left: 100px;
        }
    }
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .contain{
        height: 600px;
        overflow-y: scroll;
        .top-card-box {
            .el-card {
                height: 366px;
            }
        }
        .text {
            font-size: 14px;
        }
        .bottom-card {
            .el-card {
                height: 180px;
            }
        }
        .last-bottom-box {
            .el-card {
                height: 360px;
            }
        }
        .item {
            margin-bottom: 18px;
        }

        .box-card {
            text-align: left;
        }
        .common {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 20px;
        }
        .common-left {
            flex: 1;
        }

        .box-card-left {
            flex: 1;
            margin-right: 20px;
        }

        .nav-title {
            margin: 20px 0;
            display: flex;
            justify-content: space-between;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            padding: 4px 10px;
            background-color: #F2F2F2;
            i {
                color: #0A92FA;
            }
        }
        .item-card{
            display: flex;
            justify-content: space-around;
            .el-card {
                width: 300px;
                height: 155px;
            }
        }
        .bottom-card-contain {
            display: flex;
            justify-content: space-between;
        }
    }


    .item-common1 {
        margin-left: 40px;
        div{
            margin-bottom: 3px;
        }
    }
    .item-common {
        margin-left: 40px;
        div{
            margin-bottom: 10px;
        }
    }
    .item1-c {
        margin-left: 46px;
        color: red;
    }
    .item1-c2 {
        margin-left: 46px;
        color: green;
    }
    .item-c3 {
        margin-left: 46px;
        color: orange;
    }
}

</style>